<template>
  <el-card class="box-card" v-if="getuser">
    <div class="text-center">
      <el-button style="float: right; padding: 3px 0" type="text">
        <router-link :to="{ name: 'setup' }">
          <i class="el-icon-setting"></i>
        </router-link>
      </el-button>
      <img :src="getuser.headimg" width="100" height="100" class="rounded" alt="...">
      <p class="text-p">
        <span v-text="getuser.username"></span>
        <!-- <el-button size="mini" type="text" v-text="'13级'"></el-button> -->
      </p>
    </div>
    <div class="form-group row">
      <label for="inputPassword" class="col-sm-5 col-form-label">成长值10%</label>
      <div class="col-sm-7">
        <el-progress
          :show-text="false"
          :text-inside="true"
          :stroke-width="new Number(3)"
          color="#2f81f1"
          :percentage="10"
        ></el-progress>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  props: ["getuser"]
};
</script>

<style scoped>
.data-link{
  color:#333333;
}
span a{
  color:#999999;
}
.box-card {
  width: 300px;
  height: 292px;
  background-color: #ffffff;
  box-shadow: 0px 0px 21px 0px rgba(0, 0, 0, 0.07);
  border-radius: 10px;
}
.el-card {
  border-color: #ffffff;
}
.form-group {
  align-items: center;
  justify-content: center;
  margin-left: 22px;
  margin-right: 42px;
}
.col-form-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: #999999;
  font-family: MicrosoftYaHeiLight;
  letter-spacing: 1px;
  width: 63px;
  padding: 0px;
}

.col-sm-7 {
  padding: 0px;
}

.text-p {
  margin-top: 30px;
  margin-bottom: 54px;
  height: 16px;
  line-height: 16px;
  font-family: MicrosoftYaHeiLight;
  font-size: 16px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #333333;
}
.rounded {
  margin-top: 14px;
  margin-left: 18px;
}
.el-button--text{
  color:#999999;
}
.el-button--text:hover{
  color:#999999;
}
.el-button:nth-child(2){
  margin-left: 12px;
}
</style>

